<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="./static/js/echarts.min.js"></script>

    <script src="./static/js/jquery-1.11.1.min.js"></script>
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 100%;height:600px;"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    //app.title = '折柱混合';
    var user=[];
    var count=[];
    var i_count=[];
    var title=[];
    var value=[];
    var cc=[];
    function getusers() {//图片分享率，按组份
        $.ajax({
            type: "get",
            url: "s_total.php",
            data: {},
            async:false,
            dataType: "json",
            success: function(result){
                if(result){
                    for(var key in result.user){
                        user.push(key);
                        count.push(result.count[key]);
                        i_count.push(result.i_count[key]);
                        value.push(result.value[key]);
                    }
                }

            },
            error: function(errmsg) {
               // alert("请检查是否填写信息合理！！！");
               // location.href='Wopop.html';
            }
        });
        //console.log(user);
        return user,count,i_count,value;
    }
    getusers();
    function fetchData(cb) {
        // 通过 setTimeout 模拟异步加载
        setTimeout(function() {
            cb({
                //title:title,
                categories: user,
                data1: count,
                data2:i_count,
                data3:value
            });
        }, 1000);
    }
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
                formatter:'{b}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#C23531"></span>进群人数: {c0}<br/>' +
                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#2F4554"></span>图片分享数: {c1}<br/>' +
                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#9CC4C9"></span>分享率: {c2}%<br/>'
        },
        toolbox: {
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        legend: {
            data:['进群人数', '图片分享数','图片分享率']
        },
        xAxis: [
            {
                type: 'category',
                data: []
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '数量',
//                min: 0,
//                max: 1000,
                axisLabel: {
                    formatter: '{value} '
                }
            },
            {
                type: 'value',
                name: '分享率%',
//                min: 0,
//                max: 100,
                axisLabel: {
                    formatter: '{value}% '
                }
            }
        ],
        "dataZoom": [
            {
                "show": true,
                "height": 30,
                "xAxisIndex": [
                    0
                ],
                bottom:0,
                "start": 0,
                "end": 80
            },
            {
                "type": "inside",
                "show": true,
                "height": 15,
                "xAxisIndex": [
                    0
                ],
                "start": 1,
                "end": 35
            }
        ],
        series: [
            {
                name:'进群人数',
                type:'bar',
                data:[]
            },
            {
                name:'图片分享数',
                type:'bar',
                data:[]
            },
            {
                name:'图片分享率',
                type:'line',
                yAxisIndex: 1,
                data:[]
            }
        ]
    };
    myChart.showLoading();
    fetchData(function(data) {
        myChart.hideLoading();
        myChart.setOption({
            xAxis: {
                data: data.categories
            },
            series: [{
                // 根据名字对应到相应的系列
                name:'进群人数',
                data: data.data1
            },
                {
                    // 根据名字对应到相应的系列
                    name: '图片分享数',
                    data: data.data2
                },
                {
                    // 根据名字对应到相应的系列
                    name: '图片分享率',
                    data: data.data3
               }
            ]
        });
    });
    myChart.setOption(option);

  //  });
</script>
</body>

</html>